<template>
    <div class="login" :style="{ height: height + 'px' }">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div>用户登录</div>
                <span>USER LOGIN</span>
            </div>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="ruleForm.password" prefix-icon="el-icon-lock"
                        placeholder="请输入密码">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="login-but" type="success" @click="submitForm">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import api from "@/api/user.js";
import { setToken } from "@/utils/auth.js";
export default {
    name: 'login',
    data() {
        return {
            height: 500,
            ruleForm: {
                username: "",
                password: "",
                iclient: "",
            },
            rules: {
                username: [
                    { required: true, message: "请填写用户名", trigger: "blur" },
                ],
                password: [{ required: true, message: "请填写密码", trigger: "blur" }],
            },
        }
    },
    destroyed() {
        window.removeEventListener("keydown", this.keyDown, false);
    },
    methods: {
        handleResize() {
            let height = window.innerHeight;
            this.height = height;
        },
        submitForm() {
            let that = this;
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    api.login(that.ruleForm)
                        .then((res) => {
                            console.log("---12", res);
                            if (res.code === 0) {
                                setToken('swdyx_arcgis_token', res.data.token);
                                window.location.replace("index.html");
                            } else {
                                that.$message.error('账号或密码错误！');
                            }
                        })
                        .catch((err) => {
                            console.log("err------", err);
                        });
                }
            });
        },
        // 点击回车键登录
        keyDown(e) {
            // 回车则执行登录方法 enter键的ASCII是13
            if (e.keyCode === 13) {
                this.submitForm(); // 定义的登录方法
            }
        },
    },
    mounted() {
        let height = window.innerHeight;
        this.height = height;
        window.addEventListener('resize', this.handleResize, true);
        window.addEventListener("keydown", this.keyDown);
    }
}
</script>
<style>
body {
    margin: 0;
}

.login {
    background: url(@/assets/login/login.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.login .clearfix {
    text-align: center;
}

.login .clearfix div {
    font-weight: bold;
    font-size: 25px;
    color: #07a307;
}

.login .clearfix span {
    font-weight: bold;
    color: #c9c9c9;
}

.login .el-form {
    padding: 0 20px;
}

.box-card.el-card {
    background: #eeeeee;
    border-radius: 12px;
    width: 350px;
    margin-right: 10%;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 20px;
}

.login-but.el-button {
    width: 100%;
    margin-top: 30px;
}
</style>